import React, { useEffect, useState } from "react";
import {
  Dropdown,
  Radio,
  Space,
  Card,
  Image,
  NavBar,
  Toast,
} from "antd-mobile"; // 组件
import { ProductLists, addCart, readCart } from "@/api"; // 接口
import { setCart } from "@/utils/index"; // 购物车商品数量存缓存 做redux持久化
import Icon from "../../components/icon/index";
import { useLocation, useNavigate, useDispatch } from "umi"; // 路由
import "./assets/style.scss";

export default function index() {
  const dispatch = useDispatch(); // 使用 dispatch 设置仓库 值
  const setStore = (num: Number) => {
    // 封装函数setStore, 使用 dispatch 设置仓库 值
    dispatch({
      type: "cart/setCartLength",
      num,
    });
  };
  const [categoryId, setCategoryId] = useState(useLocation().state.id); // 获取商品分类id location.state.id
  const navigate = useNavigate();
  /* 头部返回home页 */
  const backHome = () => {
    navigate("/home");
  };
  /* 商品列表部分 */
  const [productList, setProductList] = useState([]);
  const featchProductList = (id: any) => {
    ProductLists(id).then((res: any) => {
      if (res.data.code === 0) {
        setProductList(res.data.data.result);
      }
    });
  };
  /* 排序 */
  const selectSort = (choice: string) => {
    choice === "total"
      ? featchProductList({
          categoryId,
        })
      : featchProductList({
          orderBy: choice,
          categoryId,
        });
  };
  /* 加入购物车 */
  const featchCart = () => {
    /* 封装 购物车商品数量 存  缓存和store ---> 刷新购物车商品数量 */
    readCart().then((res: any) => {
      if (res.data.code === 0) {
        setCart(res.data.data.items.length); // 购物车商品数量 存缓存
        setStore(res.data.data.items.length); // 购物车商品数量 存仓库
      }
    });
  };
  const addCarts = (e: any, cartId: number) => {
    // cartId ----> 商品ID
    e.stopPropagation(); // 阻止冒泡

    addCart({
      // 获取 步进器数据 商品id 加入购物车
      goodsId: cartId,
      number: 1,
    }).then((res: any) => {
      if (res.data.code === 0) {
        Toast.show({
          content: "添加成功!",
          afterClose: () => {
            // 添加成功， 购物车商品数量 存  缓存和store
            featchCart();
          },
        });
      }
    });
  };
  useEffect(() => {
    featchProductList({
      categoryId,
    });
  }, []);
  return (
    <>
      {/* 头部 */}
      <NavBar back="返回" onBack={backHome}>
        点赞列表
      </NavBar>
      {/* 排序 */}

      {/* 商品列表 */}
      <div className="cateList">
        {
          /* 循环 渲染商品卡片 */
          productList.map((element: any) => (
            <Card
              key={element.id}
              title={element.name}
              onClick={() => {
                navigate("/cateContent", {
                  state: { id: element.id, categoryId },
                });
              }}
            >
              <div className="cardLeft">
                <Image src={element.pic} />
              </div>
              <div className="cardRight">
                <div className="price">
                  <span>
                    {element.characteristic
                      ? element.characteristic
                      : "暂无详情"}
                  </span>
                  <span style={{ color: "red" }}>
                    {`￥${element.originalPrice}`}
                  </span>
                </div>
                <div className="cart">
                  <span></span>
                  <div
                    onClick={(e: any) => {
                      addCarts(e, element.id);
                    }}
                  >
                    <Icon name="shouye" />
                  </div>
                </div>
              </div>
            </Card>
          ))
        }
      </div>
    </>
  );
}
